<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式Grid布局</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            padding: 2rem;
        }

        h2 {
            margin: 2rem 0 1rem;
        }

        .grid-item {
            padding: 1rem;
            background-color: #4a90e2;
            color: white;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            min-height: 100px;
        }

        /* 示例1：自适应列数 */
        .auto-fit-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }

        /* 示例2：响应式卡片网格 */
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            overflow: hidden;
            transition: transform 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        .card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .card-content {
            padding: 1rem;
        }

        /* 示例3：混合布局 */
        .mixed-layout {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-auto-rows: 150px;
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .mixed-layout .featured {
            grid-column: span 4;
            grid-row: span 2;
        }

        .mixed-layout .normal {
            grid-column: span 2;
        }

        @media (max-width: 768px) {
            .mixed-layout {
                grid-template-columns: repeat(2, 1fr);
            }

            .mixed-layout .featured,
            .mixed-layout .normal {
                grid-column: span 2;
                grid-row: span 1;
            }
        }

        /* 示例4：动态网格 */
        .dynamic-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            grid-auto-rows: 150px;
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .dynamic-grid .grid-item {
            opacity: 0;
            animation: fadeIn 0.5s ease forwards;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 工具类 */
        .debug-grid {
            position: relative;
        }

        .debug-grid::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, rgba(0,0,0,0.1) 1px, transparent 1px),
                        linear-gradient(to bottom, rgba(0,0,0,0.1) 1px, transparent 1px);
            background-size: calc(100% / 6) 150px;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <h1>响应式Grid布局示例</h1>

    <h2>1. 自适应列数</h2>
    <div class="auto-fit-grid debug-grid">
        <div class="grid-item">自适应项目 1</div>
        <div class="grid-item">自适应项目 2</div>
        <div class="grid-item">自适应项目 3</div>
        <div class="grid-item">自适应项目 4</div>
    </div>

    <h2>2. 响应式卡片网格</h2>
    <div class="card-grid">
        <div class="card">
            <img src="https://picsum.photos/500/300?random=1" alt="随机图片1">
            <div class="card-content">
                <h3>卡片标题 1</h3>
                <p>这是一个响应式卡片示例，调整窗口大小查看效果。</p>
            </div>
        </div>
        <div class="card">
            <img src="https://picsum.photos/500/300?random=2" alt="随机图片2">
            <div class="card-content">
                <h3>卡片标题 2</h3>
                <p>这是一个响应式卡片示例，调整窗口大小查看效果。</p>
            </div>
        </div>
        <div class="card">
            <img src="https://picsum.photos/500/300?random=3" alt="随机图片3">
            <div class="card-content">
                <h3>卡片标题 3</h3>
                <p>这是一个响应式卡片示例，调整窗口大小查看效果。</p>
            </div>
        </div>
    </div>

    <h2>3. 混合布局</h2>
    <div class="mixed-layout debug-grid">
        <div class="grid-item featured">特色内容</div>
        <div class="grid-item normal">普通内容 1</div>
        <div class="grid-item normal">普通内容 2</div>
        <div class="grid-item normal">普通内容 3</div>
        <div class="grid-item normal">普通内容 4</div>
    </div>

    <h2>4. 动态网格</h2>
    <div class="dynamic-grid debug-grid">
        <div class="grid-item" style="animation-delay: 0.1s">动态项目 1</div>
        <div class="grid-item" style="animation-delay: 0.2s">动态项目 2</div>
        <div class="grid-item" style="animation-delay: 0.3s">动态项目 3</div>
        <div class="grid-item" style="animation-delay: 0.4s">动态项目 4</div>
        <div class="grid-item" style="animation-delay: 0.5s">动态项目 5</div>
        <div class="grid-item" style="animation-delay: 0.6s">动态项目 6</div>
    </div>

    <script>
        // 添加调试网格切换功能
        document.addEventListener('keydown', (e) => {
            if (e.key === 'g' && e.ctrlKey) {
                document.querySelectorAll('.debug-grid').forEach(grid => {
                    grid.classList.toggle('show-grid');
                });
            }
        });
    </script>
</body>
</html>
